<template>
	<!-- 我的会员 -->
	<view class="bigbox">
		<view class="header"></view>
		<view class="pt104">
			<!-- 头部盒子 -->
			<view class="headerbox pl54 pt80 mb150">
				<view class="flex">
					<image :src="userinfo.avatar" class="w114 h114 avatar mr40"></image>
					<!-- 右侧盒子 -->
					<view class="flex row-column row-around">
						<!-- 右上的盒子 -->
						<view class="flex row-column">
							<text class="mr20 username">{{userinfo.username}}</text>
							<image src="../../../static/img/my/9vip-dengji1.png" class="w130 h44 mt16"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- /头部盒子 -->

			<!-- banner大盒子 -->
			<view class="banner">
				<!-- tab栏大盒子 -->
				<view class="tabbox flex row-center">
					<!-- tab栏item -->
					<view :class="{'active':current==item.id}" v-for="(item,index) in menu" :key="index"
						class="tabbox-item  flex row-column row-around col-center flex1"
						@tap="current=item.id,getlist()">
						<image v-if="current==item.id" src="/static/img/my/9vip-biaoshi.png" class="w40 h26" />
						{{item.name}}
					</view>
					<!-- /tab栏item -->
				</view>
				<!-- /tab栏大盒子 -->

				<view class="bannerInfo pt50 pl50 pb60 pr50">
					<rich-text :nodes="config.recruit_vip" v-if="current==1"></rich-text>
					<rich-text :nodes="config.blue_collar_vip" v-if="current==2"></rich-text>
					<rich-text :nodes="config.internship_vip" v-if="current==3"></rich-text>
					<rich-text :nodes="config.recruitment_vip" v-if="current==4"></rich-text>
					<rich-text :nodes="config.workplace_vip" v-if="current==5"></rich-text>
					<!-- <view class="bannerInfo-item flex col-center">
						小圆点
						<view class="spot mr20"></view>
						<text>申请岗位补贴申请岗位补贴申请岗位补贴</text>
						小圆点
					</view> -->
					<!-- 					<view class="bannerInfo-item flex col-center">
						小圆点
						<view class="spot mr20"></view>
						<text>入职成功每月可申请岗位补贴入职成功每月可申请岗位补贴</text>
						小圆点
					</view>
					<view class="bannerInfo-item flex col-center">
						小圆点
						<view class="spot mr20"></view>
						//小圆点
						<text>入职成功每月可申请岗位补贴入职成功每月可申请岗位补贴</text>
					</view> -->
				</view>
			</view>
			<!-- /banner栏大盒子 -->

			<!-- 充值盒子 -->
			<view class="fs36 fw mt50">购买会员</view>
			<view class="footerbox flex row-around mt30 u-flex-wrap">
				
				<view class="footerbox-item" @tap='id=item.id' :class="id==item.id?'footerbox-item-a':' '"
					v-for="(item,index) in data" :key="index">
					<text>{{item.name}}</text>
					<view class="pic">￥{{item.price}}</view>
				</view>
			</view>
			<!-- /充值盒子 -->

			<!-- 底部按钮 -->
			<view class="h200 footer-btn">
				<view class="paybtn" @tap="show=true">
					立即充值
				</view>
			</view>
			<!-- //底部按钮 -->

		</view>
		<u-popup v-model="show" mode="center" :closeable="true" border-radius="14">
			<view class="p60r pb30 bg-fff">
				<u-radio-group v-model="type" class="w500r">
					<view class="w-max x-bc">
						<u-radio v-for="(item, index) in pays" :key="index" :name="item.type" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</view>
				</u-radio-group>
				<view class="w-max mt50 x-c fs34 h80r bg-zs color-fff bor-rad14r" @tap="type==3?showpay=true:submit()">
					确认</view>
			</view>
		</u-popup>

		<!-- //支付密码框 -->
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="showpay" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<!-- <text>1.00</text>
					<text class="u-font-20 u-padding-left-10">元</text> -->
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
		<!-- //支付密码框 -->
	</view>
</template>

<script>
	export default {
		name: 'VIP',
		data() {
			return {
				config: uni.getStorageSync('config'),
				userinfo: uni.getStorageSync('userInfo'),
				showpay: false,
				// 支付密码
				password: '',
				type: 1,
				pays: [{
						name: '微信',
						type: 1,
					},
					{
						name: '支付宝',
						type: 2,
					},
					{
						name: '余额',
						type: 3,
					},
				],
				show: false,
				id: 1,
				current: 1, //选中的id
				menu: [{
						name: '猎聘会员',
						id: 1,
					},
					{
						name: '蓝领会员',
						id: 2,
					},
					{
						name: '实习会员',
						id: 3,
					},
					{
						name: '招考会员',
						id: 4,
					},
					{
						name: '职场会员',
						id: 5,
					},
				],
				data: ''
			};
		},
		onLoad(e) {
			if (e.type) {
				this.current = e.type
			}
			this.getlist()
		},
		methods: {
			getlist() {
				let api
				if (this.current == 1) {
					api = "recruitsLevel"
				} else if (this.current == 2) {
					api = "blueCollarLevel"
				} else if (this.current == 3) {
					api = "internshipsLevel"
				} else if (this.current == 4) {
					api = "recruitmentLevel"
				} else if (this.current == 5) {
					api = "workplacesLevel"
				}
				this.$api[api]().then(res => {
					this.data = res.data
				})
			},

			submit() {
				let that = this
				let data = {
					id: this.id,
					type: this.type,
					password_pay: this.password
				}
				let api
				if (this.current == 1) {
					api = "recruitsPay"
				} else if (this.current == 2) {
					api = "blueCollarPay"
				} else if (this.current == 3) {
					api = "internshipPay"
				} else if (this.current == 4) {
					api = "recruitmentPay"
				} else if (this.current == 5) {
					api = "workplacePay"
				}

				this.$api[api](data).then(res => {
					if (this.type == 3) {
						this.$msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						return
					}
					let provider, orderInfo
					if (this.type == 1) {
						provider = 'wxpay'
						orderInfo = JSON.parse(res.data)
					}
					if (this.type == 2) {
						provider = 'alipay'
						orderInfo = res.data
					}
					uni.requestPayment({
						provider,
						orderInfo,
						success: res => {
							that.$msg("支付成功")
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						},
						fail: () => {
							that.$msg("支付失败")
						},
						complete: () => {}
					});
				}).catch(err => {
					this.password = ''
				})
			},

			//支付弹层
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				this.submit()
				this.showpay = false
			},
			showPop(flag = true) {
				this.password = '';
				this.showpay = flag;
			},
			finish() {
				console.log(11111)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../../static/img/my/9-VIP-bg.png) no-repeat;
		background-size: 100% auto
	}

	.header {
		height: var(--status-bar-height)
	}

	.headerbox {
		.avatar {
			border-radius: 50%;
		}

		.username {
			font-size: 34rpx;
			color: #FFFFFF;
		}

		.VIPbox {
			background: url('~@/static/img/my/1my-vip.png') no-repeat;
			background-size: 100% 100%;
			font-size: 18rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: end;
			line-height: 38rpx;
		}

		.usertxt {
			font-size: 22rpx;
			font-weight: 500;
			color: #1D2538;
		}
	}

	.banner {
		.tabbox {
			.tabbox-item {
				width: 140rpx;
				height: 84rpx;
				background: #FFDFB5;
				border-radius: 14rpx 14rpx 0px 0px;
				font-size: 24rpx;
				color: #D39B54;
				// text-align: center;
				// line-height: 84rpx;
			}

			.active {
				background: #FED093;
				color: #BD4300;
			}
		}

		.bannerInfo {
			background-color: black;
			background: linear-gradient(-9deg, #F2A643, #FFD296);
			box-shadow: 0px 8rpx 42rpx 0px rgba(21, 21, 34, 0.67);
			border-radius: 0px 0px 20rpx 20rpx;

			.bannerInfo-item {
				margin-bottom: 26rpx;

				.spot {
					width: 6rpx;
					height: 6rpx;
					background: #F8D9AD;
					border-radius: 50%;
				}

				text {
					font-size: 22rpx;
					font-weight: 500;
					color: #F3CF9E;
				}
			}
		}
	}

	.footerbox {
		.footerbox-item {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: 216rpx;
			height: 140rpx;
			background: #F1F1F1;
			border: 2rpx solid #B1B3CE;
			border-radius: 20rpx;

			text {
				font-size: 22rpx;
				font-weight: 500;
				color: #898989;
			}

			.pic {
				font-size: 40rpx;
				color: #898989;
			}
		}

		.footerbox-item-a {
			background: #FFE5C4;
			border: 2rpx solid #F3A94A;
			.pic {
				font-size: 40rpx;
				color: #BD4300;
			}
		}

	}

	.footer-btn {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 184rpx;
		background: #FFF9EC;
		box-shadow: 0px 8rpx 42rpx 0px rgba(21, 21, 34, 0.67);

		.paybtn {
			width: 500rpx;
			height: 88rpx;
			background: #F2A745;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>
